import { getListRequest, reviseMaintenanceRequest } from '@/apis/mainTenancer'
import { useColumsSearch } from '@/hooks/useColumsSearch'
import { formatUtc } from '@/utils'
import { layout } from '@/utils/contants'
import { Button, Image, Modal, Tag, Form, Input, Radio, InputNumber, Table, message } from 'antd'
import { ColumnsType, TablePaginationConfig } from 'antd/es/table'
import React, { useEffect, useState } from 'react'

interface mainType {
	username: string,
	phone: string,
	number: string,
	position: string,
	notes: string,
	picture: string,
	createAt: any,
	id: number,
	parkingType: string
	cost: number
}
const RepairList: React.FC = () => {
	const [list, setList] = useState<mainType[]>([])
	const [open, setOpen] = useState<boolean>(false);
	// const [currentMain, setCurrentMain] = useState<mainType>()
	const [form] = Form.useForm()
	const pagination: TablePaginationConfig = {
		defaultCurrent: 1,
		pageSize: 10,
		total: list.length || 0
	}
	const columns: ColumnsType<mainType> = [
		{
			title: '用户名',
			dataIndex: 'username',
		},
		{
			title: '联系方式',
			dataIndex: 'phone',
		},
		{
			title: '车牌号',
			dataIndex: 'number',
			filterMode: 'tree',
			filterSearch: true,
			onFilter: (value: string | number | boolean, record: mainType) => record.number.includes(value as string),
			...useColumsSearch<mainType>().getColumnSearchProps('number')
		},
		{
			title: '车辆类型',
			dataIndex: 'parkingType',
		},
		{
			title: '车位位置',
			dataIndex: 'position',
		},
		{
			title: '维修原因',
			dataIndex: 'notes',
			width: 200
		},
		{
			title: '维修状态',
			dataIndex: 'status',
			render(status) {
				return status === 0 ? <Tag color="#f50">维修中</Tag> : <Tag color="#2db7f5">维修完成</Tag>
			}
		},
		{
			title: '维修人员姓名',
			dataIndex: 'name',
			width: 150
		},
		{
			title: '维修人员联系电话',
			dataIndex: 'phone',
			width: 150
		},
		{
			title: '维修费用',
			dataIndex: 'cost',
			render(cost) {
				return cost === 0 ? '---' : cost
			}
		},
		{
			title: '创建时间',
			dataIndex: 'createAt',
			defaultSortOrder: 'descend',
			render: (createAt) => formatUtc(createAt),
			sorter: (a, b) => a.createAt > b.createAt ? 1 : -1,
			width: 200
		},
		{
			title: '图片',
			dataIndex: 'picture',
			render: (picture) => <Image className="tableAvater" src={picture} alt=""></Image>
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			width: 200,
			render: (_, record) => {
				return <>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	];

	useEffect(() => {
		getList()
	}, [])

	const getList = () => {
		getListRequest().then((res: any) => {
			setList(res.result)
		})
	}

	const opneModal = (record: mainType) => {
		setOpen(true)
		form.setFieldsValue(record)
	}

	const closeModal = () => {
		setOpen(false)
		form.resetFields()
	}

	const revise = (value: any) => {
		reviseMaintenanceRequest(value).then((res: any) => {
			message.success(res.message)
			closeModal()
			getList()
		})
	}

	return <div className='repairListWrap'>
		<Table dataSource={list} rowKey={(record) => record.id} columns={columns} pagination={pagination} scroll={{ x: '120%' }}>
		</Table>
		<Modal open={open} title="修改维修记录" onCancel={closeModal} footer={null}>
			<Form form={form} onFinish={revise} {...layout}>
				<Form.Item name={['id']} label="id" style={{ display: 'none' }}>
					<Input></Input>
				</Form.Item>
				<Form.Item name={['status']} label="维修状态">
					<Radio.Group>
						<Radio value={0}>维修中</Radio>
						<Radio value={1}>维修完成</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item name={['cost']} label="维修价格">
					<InputNumber min={0}></InputNumber>
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default RepairList